<template>

  <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="500px">
    <el-form size="small" :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="商品名稱" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品封面圖" prop="coverImgPath">
        <div>
          <el-button type="primary" @click="openUpload('cover')">上傳圖片</el-button>
          <img :src="ruleForm.coverImgPath" class="mt10" :width="120" v-if="ruleForm.coverImgId != ''" />
          <div class="gray9">建議尺寸300*300，大小不超過2M</div>
          <!--上传图片组件-->
          <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上傳圖片</Upload>
        </div>
      </el-form-item>

      <el-form-item label="價格類型" prop="priceType">
        <el-radio-group v-model="ruleForm.priceType">
          <el-radio :label="1">一口價</el-radio>
          <el-radio :label="2">價格區間</el-radio>
          <el-radio :label="3">折扣價</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="價格：" v-if="ruleForm.priceType == 1" prop="price">
        <el-input type="textarea" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="請輸入價格">
        </el-input>
      </el-form-item>

      <el-form-item label="價格：" v-if="ruleForm.priceType == 2" prop="price">
        <el-input type="textarea" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="請輸入最低價格"
          prop="price" :rules="[{  required: true,  message: '請輸入最低價格',  trigger: 'change'}]"></el-input>
        <el-input type="textarea" min="0" v-model="ruleForm.price2" class="mb16 max-w460" placeholder="請輸入最高價格"
          :rules="[{  required: true,  message: '請輸入最高價格',  trigger: 'change'}]"></el-input>
      </el-form-item>

      <el-form-item label="價格：" v-if="ruleForm.priceType == 3" prop="price">
        <el-input type="textarea" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="請輸入原價"
          :rules="[{  required: true,  message: '請輸入原價',  trigger: 'change'}]"></el-input>
        <el-input type="textarea" min="0" v-model="ruleForm.price2" class="mb16 max-w460" placeholder="請輸入現價"
          :rules="[{  required: true,  message: '請輸入現價',  trigger: 'change'}]"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="openProduct()">綁定商品</el-button>
      </el-form-item>
      <el-form-item v-if="ruleForm.productId != ''">{{ ruleForm.productName }}</el-form-item>
      <el-form-item>
        <img :src="ruleForm.productImgPath" class="mt10" :width="120" v-if="ruleForm.productImgId != ''" />
      </el-form-item>
    </el-form>
    <template #footer></template>
    <div class="dialog-footer">
      <el-button size="small" @click="close">取 消</el-button>
      <!-- <el-button @click="resetForm('formRef')">重置</el-button> -->
      <el-button type="primary" @click="submitForm('formRef')" :loading="loading">立即提交</el-button>
    </div>

    <!--商品选择-->
    <Product :isproduct="isproduct" :excludeIds="exclude_ids" :islist="false" @closeDialog="closeProductFunc">
    </Product>
  </el-dialog>
</template>

<script>
import wxLiveApi from '@/api/wxlive.js';
import Upload from '@/components/file/Upload.vue';
import Product from '@/components/product/Product.vue';
export default {
  components: {
    /*图片上传*/
    Upload: Upload,
    /*选择商品*/
    Product: Product
  },
  data() {
    return {
      title: "添加直播商品",
      ruleForm: {},
      isupload: false,
      coverImgPath: '',
      shareImgPath: '',
      feedsImgPath: '',
      productImgPath: '',
      productName: '',
      rules: {
        name: [{
          required: true,
          message: "請輸入商品名稱",
          trigger: 'blur'
        }, {
          min: 3,
          max: 17,
          message: "長度在 3 到 17 個字符",
          trigger: 'blur'
        }],
        coverImgPath: [{
          required: true,
          message: "請選擇圖片",
          trigger: 'change'
        }],
        price: [{
          required: true,
          message: "請輸入價格",
          trigger: 'change'
        }]
      },
      /*是否加载完成*/
      loading: false,
      /*是否打开选择商品*/
      isproduct: false,
      /*已有的id*/
      exclude_ids: [],
      /*左边长度*/
      formLabelWidth: '120px',
      /*是否显示*/
      dialogVisible: false
    };
  },
  created() {},
  methods: {
    settingDefine() {
      this.ruleForm = {
        priceType: 1
      };
    },
    open(row) {
      this.title = "添加直播商品";
      this.settingDefine();
      if (row && row.appProductId) {
        this.title = "編輯直播商品";
        this.ruleForm = row;
      }
      this.dialogVisible = true;
    },
    close() {
      this.resetForm('formRef');
      this.dialogVisible = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let param = self.ruleForm;
          if (param && param.appProductId) {
            wxLiveApi.editProduct(param, true).then(data => {
              ElMessage({
                message: "編輯成功",
                type: 'success'
              });
              this.dialogVisible = false;
              this.$emit("get-table-list");
            });
          } else {
            wxLiveApi.addProduct(param, true).then(data => {
              ElMessage({
                message: "創建成功",
                type: 'success'
              });
              this.dialogVisible = false;
              this.$emit("get-table-list");
            });
          }
        } else {
          return false;
        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*关闭商品选择*/
    closeProductFunc(e) {
      this.ruleForm.productId = e.params.productId;
      this.ruleForm.productImgPath = e.params.imagePath;
      this.ruleForm.productName = e.params.productName;
      this.isproduct = false;
    },
    /*关闭弹窗*/
    cancelFunc(e) {
      this.$emit('close', {
        type: 'error'
      });
    },
    /*打开添加*/
    openProduct() {
      this.isproduct = true;
    },
    /*上传图片*/
    uploadFile(fileId) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: "文件上傳中，請等待",
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      wxLiveApi.uploadFile({
        fileId
      }, err => {
        loading.close();
      }).then(response => {
        loading.close();
        ElMessage({
          message: "上傳文件至微信成功",
          type: 'success'
        });
      }).catch(response => {
        loading.close();
      });
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.ruleForm.coverImgPath = e[0].filePath;
        this.ruleForm.coverImgId = e[0].fileId;
        this.uploadFile(this.ruleForm.coverImgId);
      }
      this.isupload = false;
    }
  }
};
</script>

<style>
.img {
    margin-top: 10px;
  }
</style>

